<template>
    <ul class="todo-lists">
        <li class="todo-list" v-for="todo in filterTodos" :key="todo.id" >
            <edit-todo
                class="todo-input"
                v-if="todo === editedTodo"
                v-model:todoTitle="todo.title"
                @blur="editDone"
                @keyup.enter="editDone"
                @keyup.esc="editCancel(todo)"
                v-todo-focus="todo === editedTodo"
            />
            <div v-else>
                <input type="checkbox" v-model="todo.completed" />
                <label
                    @dblclick="edtiTodo(todo)"
                    class="todo-title"
                    :class="{ completed: todo.completed }"
                >{{ todo.title }}</label>
                <button @click="removeTodo(todo)">X</button>
            </div>
        </li>
    </ul>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
    props: {
        filterTodos: {
            type: Array,
            required: true
        },
        editedTodo: Object,
    },
    emits: ['update:editedTodo', 'removeTodo'],
    setup(props, { emit }) {
        const state = reactive({
            todoCache: ''
        })

        const edtiTodo = todo => {
            // 赋值正在编辑的 todo
            emit('update:editedTodo', todo)
            // 缓存编辑状态的todo一开始的title值
            state.todoCache = todo.title
        }
        const editDone = () => {
            emit('update:editedTodo', null)
        }
        const editCancel = todo => {
            emit('update:editedTodo', null)
            todo.title = state.todoCache
        }
        const removeTodo = todo => {
            emit('removeTodo', todo)
        }
        return {
            ...toRefs(state),
            edtiTodo,
            editDone,
            editCancel,
            removeTodo
        }
    },
    // 自定义指令
    directives: {
        'todo-focus': (el, { value }) => {
            if (value) {
                el.focus()
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.todo-list {
    .completed {
        text-decoration: line-through;
    }
}
</style>